import React ,{Component} from "react"
import { Card, List, Typography, Button } from "antd";
//引入redux管理的状态和改变状态的action
import action from "../../../redux/isRead/action.js"
import {connect} from "react-redux"
//自定义的列表数据
const data = [
  "Racing car sprays burning fuel into crowd.",
  "Japanese princess to wed commoner.",
  "Australian walks 100km after outback crash.",
  "Man charged over missing wedding girl.",
  "Los Angeles battles huge wildfires."
];

class Notice extends Component{
	allread=()=>{
		//需要触发一个改变被redux管理的isRead的值的action
		console.log("全部已读")
		this.props.allread()
	}
	render(){
		console.log(this.props)
		return(
			<Card
			  title="通知中心"
			  extra={
			    <Button onClick={this.allread}>全部已读</Button>
			  }
			>
			  <List
			    header={<div>Header</div>}
			    footer={<div>Footer</div>}
			    bordered
			    dataSource={data}
			    renderItem={item => (
			      <List.Item
			        style={{ display: "flex", alignContent: "spaced-between" }}
			      >
			        <Typography.Text mark>[ITEM]</Typography.Text> {item}
			        <Button size="small">已读</Button>
			      </List.Item>
			    )}
			  ></List>
			</Card>
		)
	}
} 
const mapState=(state)=>{
	return state
}
const mapDispatch=action;
export default connect(mapState,mapDispatch)(Notice)